<template>
  <view class="page bg-white">
    <view class="main">
      <u-form :labelStyle="{ fontSize: '32rpx', color: '#333', fontWeight: 'bold' }" labelWidth="100"
        labelPosition="top" :model="formData" :rules="rules">
        <u-form-item label="教室名称" prop="classInfo">
          <u-input fontSize="32rpx" v-model="formData.classInfo" placeholder="请输入教室名称" />
        </u-form-item>
        <u-form-item label="教室位置" prop="classLocation">
          <u-input fontSize="32rpx" v-model="formData.classLocation" placeholder="请输入教室位置" />
        </u-form-item>
      </u-form>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from '@/composables/useTheme';
const { themePrimary, themeTertiary } = useTheme();

const formData = ref({
  classInfo: null,
  classLocation: null,
})
</script>